<template>
  <div class="navigation-page">
    <main class="main-content">
      <div class="hero-section">
        <h1 class="hero-title">职为你来 - 您的智能求职伙伴</h1>
        <p class="hero-subtitle">扫描小程序码，开启您的职业之旅</p>
      </div>

      <div class="features-section">
        <div class="feature">
          <div class="feature-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <h2 class="feature-title">实时更新</h2>
          <p class="feature-description">第一时间获取最新职位信息</p>
        </div>
        <div class="feature">
          <div class="feature-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <h2 class="feature-title">个性化推荐</h2>
          <p class="feature-description">基于您的技能和经验量身定制职位</p>
        </div>
        <div class="feature">
          <div class="feature-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
              ></path>
            </svg>
          </div>
          <h2 class="feature-title">即时沟通</h2>
          <p class="feature-description">与招聘方直接对话，提高求职效率</p>
        </div>
      </div>

      <div class="qr-code-section">
        <div class="qr-code-container">
          <img
            src="../../assets/gzh.jpg"
            alt="职为你来小程序码"
            class="qr-code"
          />
        </div>
        <div class="qr-code-info">
          <h2 class="qr-code-title">扫码进入小程序</h2>
          <p class="qr-code-description">立即体验智能求职，轻松找到理想工作</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
// No additional script needed for this static page
</script>

<style scoped lang="scss">
.navigation-page {
  font-family: 'Arial', sans-serif;
  color: #333;
  line-height: 1.6;
  background-image: linear-gradient(to bottom, #f1f6f8 0%, #eaf2f5 53%);
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 5%;
}

.hero-section {
  text-align: center;
  margin-bottom: 3rem;
}

.hero-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.features-section {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature {
  flex: 1;
  text-align: center;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.feature:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 2rem;
  color: #3498db;
  margin-bottom: 1rem;
}

.feature-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.feature-description {
  color: #7f8c8d;
}

.qr-code-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
}

.qr-code-container {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.qr-code {
  width: 200px;
  height: 200px;
}

.qr-code-info {
  max-width: 300px;
}

.qr-code-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.qr-code-description {
  color: #7f8c8d;
}

@media (max-width: 768px) {
  .features-section {
    flex-direction: column;
  }

  .qr-code-section {
    flex-direction: column;
    text-align: center;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }
}
</style>
